<template>
	<view class="carIndex">
		<view class="selectContainer" v-for="(item, index) in carData" :key="index">
			<!-- 3个部分 ,选择按钮 -->
			<view style="width: 40rpx; height: 40rpx;">
				<text
					:class="['iconfont', { 'icon-xuanzhong': item.checked, selected_color: item.checked, 'icon-xuanze': !item.checked, no_selected: !item.checked }]"
					@click="changeChecked(index, item.checked)"
				></text>
			</view>
			<!-- 图片部分 -->
			<view class="carListImage" @click="toGoodsDetal(item.goods_id)"><image :src="item.goods_small_logo" style="width: 100%;height: 100%;"></image></view>
			<!-- 文字标题和单价,还有加减商品数量 -->
			<view class="goods_pirce" @click="toGoodsDetal(item.goods_id)">
				<text class="goods_name">{{ item.goods_name }}</text>
				<view class="price_quantity">
					<text class="price_doll">
						￥
						<text style="font-size: 24rpx;">{{ item.goods_price }}</text>
					</text>
					<view class="product_size">
						<!-- 加号 -->
						<view class="iconfont icon-zengjia" @click.stop="addition(index)"></view>
						<!-- 显示的数字 -->
						<view>{{ item.time }}</view>
						<!-- 减号 -->
						<view class="iconfont icon-jianshao" @click.stop="subtraction(index, item.time)"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 全选底部栏 -->
		<view class="floor_fn">
			<!-- 全选/价格 -->
			<view class="all_price">
				<view style="display: flex;align-items: center;">
					<text
						style="width: 40rpx; height: 40rpx;margin-top: 10rpx;"
						:class="['iconfont', { 'icon-xuanzhong': allchecked }, { selected_color: allchecked }, { 'icon-xuanze': !allchecked }, { no_selected: !allchecked }]"
						@click="handlerAllChecked"
					></text>
					<text class="all_checked_name">全选</text>
				</view>
				<view class="total_price">
					<text class="total_name">合计:</text>
					<text class="price_doll">
						￥
						<text style="font-size: 24rpx;">{{ priceTotal }}</text>
					</text>
				</view>
			</view>
			<!-- result /去结算 -->
			<view class="to_result" @click="toPay">去结算({{ resultSize }})</view>
		</view>
	</view>
</template>

<script>
import goodsItem from '@/components/goodsItem.vue';
export default {
	components: {
		goodsItem
	},
	data() {
		return {
			allchecked: false,
			carData: '',
		};
	},
	onLoad(option) {
		// console.log(option);
	},
	async onShow() {
		// 不能使用onload了,这个页面不会销毁,onload只会触发一次
		// 获取购物车本地存储数据,存到data
		this.carData = await this.getGoodsDetal();
		// this.judgeAllCheked();
		if(!this.carData){
			uni.showToast({
				icon:"none",
				title:"购物车还没有商品"
			}).then(()=>{
				uni.switchTab({
					url:"/pages/index/index"
				})
			})
		}
	},
	// 每一次切换就会把数据存到本地,不需要每次都存储
	onHide() {
		uni.setStorage({
			key: 'goodsDetal',
			data: this.carData
		});
	},
	computed: {
		priceTotal() {
			if (this.carData) {
				// 页面一进来car没有数据的,我们要判断,carData有无值
				let res = 0;
				// 遍历购物车数据,筛选出选中状态的数组
				let carList = this.carData.filter(item => {
					return item.checked === true;
				});
				carList.forEach((item, index) => {
					res += item.time * item.goods_price;
				});
				return res;
			}
		},
		resultSize() {
			if (this.carData) {
				let resNum = 0;
				let carList = this.carData.filter(item => {
					return item.checked === true;
				});
				carList.forEach((item, index) => {
					resNum += item.time;
				});
				return resNum;
			}
		},
		//监测是否触发全选
		judgeAllCheked() {
			if (this.carData) {
				let carList = this.carData.filter(item => {
					return item.checked === true;
				});
				if (carList.length === this.carData.length) {
					return (this.allchecked = true);
				} else {
					return (this.allchecked = false);
				}
			}
		}
	},
	methods: {
		// 点击购物车宝贝跳转到商品详情页
		toGoodsDetal(goods_id) {
			uni.navigateTo({
				url: '/pages/goods_detail/index?goods_id=' + goods_id
			});
		},
		// 点击跳转到订单页面
		toPay() {
			uni.setStorage({
				key: 'goodsDetal',
				data: this.carData
			}).then(()=>{
				uni.navigateTo({
					url: '/pages/pay/index?price=' + this.priceTotal + '&amuse=' + this.resultSize
				});
			})
		},
		// 当点击全选按钮的时候
		handlerAllChecked() {
			// 直接取反 取反为 !this.allchecked
			// const cart=this.carData.map(item=>{
			// 	return {...item,checked:!this.carData}
			// })
			// this.carData=cart
			// 当前有两种状态
			if (this.allchecked) {
				// 点击取消选中状态
				this.allchecked = false;
				this.carData = this.carData.map(item => {
					item.checked = false;
					return item;
				});
			} else {
				// 点击增加选中状态
				this.allchecked = true;
				this.carData = this.carData.map(item => {
					item.checked = true;
					return item;
				});
			}
			// 还要把数据存到本地
			// this.setStorageItem(this.carData);
		},
		// 封装监测是否触发全选
		// judgeAllCheked() {
		// 	let carList = this.carData.filter(item => {
		// 		return item.checked === true;
		// 	});
		// 	if (carList.length === this.carData.length) {
		// 		this.allchecked = true;
		// 	} else {
		// 		this.allchecked = false;
		// 	}
		// },
		// 点击选中取消选中单个商品
		changeChecked(index, checked) {
			this.carData[index].checked = !this.carData[index].checked;
			// if (checked) {
			// 	// 点击为选中
			// 	this.carData[index].checked = false;
			// 	this.setStorageItem(this.carData);
			// } else {
			// 	// 点击为取消选中
			// 	this.carData[index].checked = true;
			// this.setStorageItem(this.carData);
			// }
			// // 还要检验有没有全选完
			// this.judgeAllCheked();
		},
		// 封装获取获取购物车列表
		async getGoodsDetal() {
			let [err, res] = await uni.getStorage({
				key: 'goodsDetal'
			});
			if (res) {
				return res.data;
			} else {
				uni.showToast({
					title: '购物车没有东西快去购买吧',
					icon: 'none'
				});
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		// 点击加号
		async addition(index) {
			this.carData[index].time++;
			// 还要把数据存到本地渲染
			// this.setStorageItem(this.carData);
		},
		//点击减号
		async subtraction(index, time) {
			// 当购物车只有一件商品的时候
			if (time === 1) {
				// 弹出模态框,要求用户确认是否点击删除
				let [err, res] = await uni.showModal({
					title: '提示',
					content: '确定要把宝贝从购物车移除么'
				});
				if (res.confirm) {
					this.carData.splice(index, 1);
				}
			} else {
				this.carData[index].time--;
			}
			// this.setStorageItem(this.carData);
		}
		// 封装一个储存本地的方法
		// async setStorageItem(data) {
		// 	let [err, res] = await uni.setStorage({
		// 		key: 'goodsDetal',
		// 		data: data
		// 	});
		// }
	}
};
</script>

<style lang="less">
.carIndex {
	padding: 27rpx 25rpx 0 27rpx;
	.selectContainer {
		padding: 9rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.carListImage {
		width: 191rpx;
		height: 191rpx;
	}
	.goods_pirce {
		width: 410rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.goods_name {
		height: 66rpx;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 55rpx;
		color: #434343;
	}
	.price_quantity {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.product_size {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #8a8a8a;
		font-size: 30rpx;
		width: 120rpx;
	}
	.price_doll {
		font-size: 18rpx;
		color: #7d00ff;
	}
	.no_selected {
		color: #8a8a8a;
	}
	.selected_color {
		color: #7d00ff;
	}
}

.floor_fn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: #fff;
	border: 1rpx solid #dedede;
	height: 83rpx;
	width: 100%;
	padding: 16rpx 21rpx 15rpx 27rpx;
}
.all_checked_name {
	font-size: 21rpx;
	color: #8a8a8a;
	margin: 4px 26rpx 0 20rpx;
}
.all_price {
	display: flex;
	align-items: center;
}
.total_price {
	display: flex;
}
.total_name {
	width: 78rpx;
	height: 37rpx;
	color: #292929;
	font-size: 26rpx;
	margin-right: 20rpx;
}
.to_result {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150rpx;
	height: 52rpx;
	border-radius: 26rpx;
	font-size: 21rpx;
	color: #fff;
	background-color: #7d00ff;
	
	
}
</style>
